Code Playground

@layer reset, base, demo, property;

@layer property {
  @keyframes load {
    0%,
    10% {
      --a: 0deg;
      --h: 0;
    }
    100% {
      --a: 360deg;
      --h: 100;
    }
  }

@property --a {
    initial-value: 0deg;
    inherits: false;
    syntax: "<angle>";
  }
  @property --h {
    initial-value: 0;
    inherits: false;
    syntax: "<number>";
  }

.loader {
    --charge: hsl(var(--h, 0), 80%, 50%);

border-image: conic-gradient(
        var(--charge) var(--a),
        transparent calc(var(--a) + 0.5deg)
      )
      30;

animation: load 2s infinite ease-in-out;
  }
}

@layer demo {
  .loader {
    padding: 2rem 4rem;
    font-family: monospace;
    font-weight: bold;
    color: #fff;
    border-style: solid;
    border-width: 1vmin;
    font-size: 2rem;
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
    background-color: #1c1717;
    color: #fff;
    display: grid;
    place-content: center;
    padding: 1rem;
  }
}

Frontend Forever App